<template>
	<view class="video-item">
		<view class="video-item-image" :style="[row.url_images?{'background-image':`url(https://jsjhj.net${row.url_images})`}:{'background-image':`url(https://jsjhj.net${row.image})`}]">
			<image src="@/static/image/play.png" mode=""></image>
		</view>
		<view class="video-content">
			<view class="video-word">
				<text>{{row.name}}</text>
			</view>
			<view class="video-label">
				<text class="label-name" style="background: #F3F8FF;color: #1466E3;" v-if="row.categ_id_name=='初级'">{{row.categ_id_name}}</text>
				<text class="label-name" style="background: #F2FFFB;color: #00D49A;" v-if="row.categ_id_name=='中级'">{{row.categ_id_name}}</text>
				<text class="label-name" style="background: #FFF9F0;color: #FF9700;" v-if="row.categ_id_name=='高级'">{{row.categ_id_name}}</text>
				<text class="label-name" style="background: #F3F8FF;color: #1466E3;" v-if="row.categ_id=='初级'">{{row.categ_id}}</text>
				<text class="label-name" style="background: #F2FFFB;color: #00D49A;" v-if="row.categ_id=='中级'">{{row.categ_id}}</text>
				<text class="label-name" style="background: #FFF9F0;color: #FF9700;" v-if="row.categ_id=='高级'">{{row.categ_id}}</text>
				
				<text class="video-date">{{subStr(row.create_date)}}</text>
			</view>
			<view class="video-remarks">
				<view class="video-time" v-if="row.snewstitle">
					<text>总时长：</text>
					<text>{{row.snewstitle}}</text>
				</view>
				<image class="video-eye" src="@/static/image/eye.png" mode="" />
				<text class="video-value">{{row.click}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['row'],
		methods: {
			getStyle(label) {
				if (label == '初级') {
					return 'background: #F3F8FF;color: #1466E3;'
				} else if (label == '中级') {
					return 'background: #F2FFFB;color: #00D49A;'
				} else if (label == '高级') {
					return 'background: #FFF9F0;color: #FF9700;'
				}

			},
			subStr(str) {
				return str.substr(0, 10)
			}
		}
	}
</script>

<style lang="less" scoped>
	.video-item {
		display: flex;
		align-items: center;
		background: #fff;
		padding: 20rpx 30rpx 20rpx 30rpx;
		margin-bottom: 20rpx;

		.video-item-image {
			width: 226rpx;
			height: 168rpx;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			position: relative;

			image {
				width: 48rpx;
				height: 48rpx;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}

		.video-content {
			flex: 1;
			margin-left: 23rpx;

			.video-word {
				word-break: break-all;
				text-overflow: ellipsis;
				overflow: hidden;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				margin-bottom: 8rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: #333333;
				line-height: 44rpx;
			}

			.video-label {
				display: flex;
				margin-bottom: 35rpx;

				.label-name {
					// width: 76rpx;
					height: 38rpx;
					font-size: 24rpx;
					line-height: 38rpx;
					padding: 0 14rpx;
					background: #F2FFFB;
					border-radius: 6rpx;
				}

				.video-date {
					font-size: 28rpx;
					font-weight: 400;
					color: #333333;
					flex: 1;
					text-align: right;
				}
			}

			.video-remarks {
				display: flex;
				text-align: center;
				align-items: center;
				font-size: 28rpx;
				font-weight: 400;
				color: #666666;
				line-height: 40rpx;

				.video-time {
					flex: 1;
					text-align: left;
				}

				.video-eye {
					width: 30rpx;
					height: 22rpx;
					margin-right: 14rpx;
				}

				.video-value {

					color: #999999;
				}
			}
		}
	}
</style>
